<template>
  <view class="hpu_container">
    <template v-for="(item, index) in showList">
      <list-item :item="item" :index="index"></list-item>
    </template>
  </view>
  <view class="pickUpBottom" v-if="paylist.length===0">
    <view class="botBtn" @click="savePickUp">确定取货（共{{allCount}}件）</view>
  </view>

  <view class="payBottom" v-else>
    <view class="total">将取{{ allCount }}件</view>
    <view class="count">合计</view>
    <view style="margin-right: 5rpx;">
      <view class="money">￥ {{ allPrice }}</view>
      <view class="detail" @click="popShow = !popShow">明细 ∧</view>
    </view>
    <view class="pay" @click="toPay">立即支付</view>
  </view>
  <nut-popup :style="{ height: '900rpx' }" position="bottom" :closeable="true" round v-model:visible="popShow">
    <view class="price_pop">
      <view class="title">费用明细</view>
      <view class="contant" v-if="paylist.length === 1">
        <view class="price_header">
          <view class="m">合计费用</view>
          <view class="n">
            <view class="i">¥</view>
            <view class="j">{{ allPrice }}</view>
          </view>
        </view>
        <view class="price_row" v-for="(cost, i) in allCostList" :key="i">
          <view class="price_left">{{ cost.ssopRemark }}</view>
          <view class="price_right">¥{{ cost.actualMoney - cost.paidMoney }}</view>
        </view>
      </view>
      <view class="content_batch" v-if="paylist.length > 1">
        <price-details v-for="(item, index) in paylist" :item="item" />
      </view>
      <view class="payBottom">
        <view class="total">将取{{ allCount }}件</view>
        <view class="count">合计</view>
        <view style="margin-right: 5rpx;">
          <view class="money">￥ {{ allPrice }}</view>
          <view class="detail" @click="popShow = !popShow">明细 ∨</view>
        </view>
        <view class="pay" @click="toPay">立即支付</view>
      </view>
    </view>
  </nut-popup>
</template>
<script lang="ts" setup>
import { computed, ref, watch, onMounted } from "vue";
import Taro, { useDidShow } from "@tarojs/taro";
import listItem from '@/pages/pickUp/handlePickUpList.vue';
import useUserInfoStore from "@/store/user";
import useTransactionStore, { transaction } from "@/store/pickUp";
import usePickUpBatchStore from "@/store/pickUpBatch";
import { $post, $get } from "@/@api";
import priceDetails from './priceDetails.vue'
const userStore = useUserInfoStore();
const transactionStore = useTransactionStore();
const pickUpBatchStore = usePickUpBatchStore();
const popShow = ref<boolean>(false)
const allCount = ref<number>(0)
const showList = ref(pickUpBatchStore.list.map((item) => {
  item.orderList.forEach((order) => {
    order.goodsInfo.forEach((goods) => {
      goods.number = 0
    })
  })
  return item
}))

const paylist = ref([])
paylist.value =showList.value[0].orderList.filter((item)=>{
  return !item.allPaid 
})


watch(() => showList.value, (newVal) => {
  console.log(newVal)
  let count = 0
  newVal.forEach(branch => {
    branch.orderList.forEach(order => {
      order.goodsInfo.forEach(goods => {
        count += parseInt(goods.number)
      })
    })
  })
  allCount.value = count
}, { deep: true, immediate: true })
//费用明细

const allCostList = computed(() => {
  let costList: any[] = []
  let arr = showList.value[0].orderList
  arr.forEach((item) => {
    item.costList.forEach((cost) => {
      let nameIndex = costList.findIndex((newCost: any) => {
        return newCost.ssopRemark === cost.ssopRemark
      })
      if (nameIndex === -1) {
        costList.push({
          ssopRemark: cost.ssopRemark,
          actualMoney: cost.actualMoney ? Number(cost.actualMoney) : 0,
          paidMoney: cost.paidMoney ? Number(cost.paidMoney) : 0,
        })
      }
      else {
        costList[nameIndex].actualMoney += cost.actualMoney ? Number(cost.actualMoney) : 0
        costList[nameIndex].paidMoney += cost.paidMoney ? Number(cost.paidMoney) : 0
      }
    })
  })
  return costList
})
//计算总价
const allPrice = computed(() => {
  return showList.value[0].orderList.reduce((sum, it) => {
    let p = 0
    it.costList.forEach((cost) => {
      p = p + (cost.actualMoney - cost.paidMoney)  // 后端待联调
    })
    return sum + p
  }, 0)
})

onMounted(() => {
  console.log(showList.value[0].orderList, "列表数据");

})
//确定取货
const savePickUp = async () => {
  if (allCount.value > 0) {
    let arr: any = []
    showList.value.forEach(branch => {
      branch.orderList.forEach(order => {
        order.goodsInfo.forEach(goods => {
          arr.push({
            orderId: order.billNo,
            ssogId: goods.ssogId,
            goodsName: goods.goodsName,
            num: goods.number,
            receiverIdNo: '',
            customerIdNo: '',
            receiverName: order.receiver,
            companyNo: branch.branchCompanyNo,
            ispicked: false,
            isFlag: 0
          })
        })
      })
    })
    let res: any = await $post('/selfmachine-system/takeCargo/takeGoodsByBillNo', arr)
    if (res.data.code === 200) {
      let successRes = await $post('/selfmachine-system/order/list/waitPickUpNew', arr.map(item => { return item.orderId }))
      transactionStore.transactionList = successRes.data.data || []
      transactionStore.pickUpCode = transactionStore.transactionList.map(item => { return item.pickUpCode })
      Taro.redirectTo({
        url: '/pages/pickUp/success'
      })
    }
  }
  else {
    Taro.showToast({
      icon: 'none',
      title: '请添加一定数量的货物'
    })
  }
}
//立即支付 
const toPay = async ()=>{
  // Taro.navigateTo({
  //   url: "/pages/pay/index",
  // });
  Taro.redirectTo({
        url: '/pages/pickUp/success'
      })
}
</script>
<style lang="scss">
page {
  background-color: #f5f5f5;
}

.hpu_container {
  width: 100%;
  box-sizing: border-box;
  padding: 16rpx 24rpx;
  margin-bottom: 150rpx;
}

.pickUpBottom {
  width: 100%;
  background: #fff;
  position: fixed;
  bottom: 0;
  height: 128rpx;
  border-top: 1rpx solid #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2500;

  .botBtn {
    width: 700rpx;
    height: 88rpx;
    border-radius: 44rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #0966ff;
    color: #fff;
    font-size: 32rpx;
  }
}

.payBottom {
  display: flex;
  justify-content: space-around;
  font-size: 24rpx;
  color: #666666;
  width: 750rpx;
  padding-top: 18rpx;
  background: #FFFFFF;
  height: 128rpx;
  position: fixed;
  bottom: 0;
  z-index: 9;
  .total {
    margin-top: 8rpx;
    margin-left: 108rpx;
  }

  .count {
    margin-top: 8rpx;
  }

  .money {
    font-size: 40rpx;
    color: #0966FF;
  }

  .detail {
    font-size: 24rpx;
    color: #252525;
    margin-left: 92rpx;
    margin-top: 8rpx;
  }

  .pay {
    border-radius: 88rpx;
    height: 88rpx;
    width: 296px;
    background: #0966FF;
    font-size: 32rpx;
    line-height: 88rpx;
    color: #FFFFFF;
    text-align: center;

  }
}

.price_pop {
  background-color: #f5f5f5;

  .title {
    height: 112rpx;
    display: flex;
    align-items: center;
    padding-left: 24rpx;
    font-size: 32rpx;
    color: #252525;
    font-weight: 700;
    background-color: #fff;
    box-sizing: border-box;
  }

  .contant {
    height: 600rpx;
    width: 100%;
    overflow: auto;

    .price_row {
      width: 100%;
      height: 64rpx;
      padding: 0 120rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .price_left {
        font-family: PingFang SC;
        font-size: 28rpx;
        color: #252525;
      }

      .price_right {
        font-family: PingFang SC Medium;
        font-size: 28px;
        color: #252525;
      }
    }

    .price_header {
      margin-top: 48rpx;
      margin-bottom: 32rpx;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .m {
        font-family: PingFang SC;
        font-size: 24rpx;
        color: #252525;
      }

      .n {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;

        .i {
          font-family: PingFang SC;
          font-size: 44rpx;
          /* 外部/主色/蓝 */
          color: #0966ff;
        }

        .j {
          font-family: PingFang SC;
          font-size: 76rpx;
          color: #0966ff;
        }
      }
    }
  }

  .content_batch {
    padding-bottom: 16rpx;
    height: 600rpx;
    width: 100%;
    overflow: auto;
  }
}</style>
